<template>
    <ul class="list">
        <li v-for="item in $store.state.addressList" :key="item.id">
            <p>
                <span class="lable">收货人：</span>
                <b>{{ item.name }}</b>
                <el-tag class="ml-2" type="warning" v-show="item.isDefault">默认地址</el-tag>
            </p>
            <p>
                <span class="lable">手机：</span>
                {{ item.mobile }}
            </p>
            <p>
                <span class="lable">所在地区：</span>
                {{ item.area }}
            </p>
            <p>
                <span class="lable">地址：</span>
                {{ item.address }}
            </p>
            <div class="right_bottom">
                <el-button type="primary" text v-show="!item.isDefault" @click="setDefault(item.id)">设置默认</el-button>
                <el-button type="primary" text @click="editAddress(item)">修改地址</el-button>
                <el-button type="danger" text @click="del(item.id)">删除地址</el-button>
            </div>
        </li>
    </ul>
</template>

<script setup>

import { useStore } from 'vuex';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';



const store = useStore()
const router = useRouter()

const setDefault = (id) => {
    store.commit('setDefault', id)
    ElMessage.success('设置默认地址成功')
}

const del = (id) => {
    store.commit('del', id)
    ElMessage.success('删除成功')
}

const editAddress = (obj) => {
    router.push({
        path: '/address',
        query: obj
    })
}
</script>

<style lang="scss" scoped>
.list {
    li {
        width: 100%;
        height: 180px;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        margin-bottom: 20px;

        p {
            b {
                margin-right: 15px;
            }

            .lable {
                display: inline-block;
                width: 140px;
                text-align: right;
                margin-right: 10px;
            }
        }

        .right_bottom {
            position: absolute;
            right: 5px;
            bottom: 5px;
        }
    }
}
</style>